/** 
* 
* */
Rsd.define('Rsd.container.Simulator', {
    extend: 'Rsd.container.Component',
    xtype: 'simulator',
    //margin: '10 0 10 0',
    height: '100%',
    width: '100%',
    title: '模拟器', 
    header:{
        cls:'x-phone-header',
        space:1,
        height:40,
        visible:true
    },
    cls:'x-simulator',
    bodyCls:'x-phone-body',
    layout:'vbox',
    items:[
        {
            xtype:'container',
            header:{
                cls:'x-app-header',
                height:45,
                space:1,
                visible:true
            },
            width:'100%',
            height:'100%',
            bodyTagName:'iframe',
            bodyCls:'x-app-body',
            afterLayout:'app_afterLayout',
            border:false,
            src:'javascript:void(0);'
        }
    ],
    /**
     * 控件属性，应用为每个控件定义JsonSchema ，将schema 分为两类：结构schema (基础控件) 和 数据schema（业务控件，hermit 和 myths）
     */
    ctrlSchemaList:[
        {name:'$className',text:'类名',readonly:true}, 
        {name:'xtype',text:'类名简称',readonly:true}, 
        {name:'name',text:'html dom name',readonly:false},
        {name:'id',text:'ID',readonly:true},
        {name:'style',text:'dom样式',readonly:false}, 
        {name:'cls',text:'container演示',readonly:true},
        {name:'height',text:'高度',readonly:false},
        {name:'width',text:'宽度',readonly:false}, 

        {name:'label',text:'组件头部',readonly:false,children:['style']},
        {name:'ctrlCls',text:'body样式',readonly:true},
 
        {name:'title',text:'标题',readonly:false},
        {name:'header',text:'组件头部',readonly:false},
        {name:'bodyCls',text:'body样式',readonly:true}, 
        {name:'layout',text:'布局方式',readonly:false},
        {name:'floating',text:'浮动',readonly:false},

        {name:'text',text:'文字',readonly:false},  
        {name:'mulitiLine',text:'多行',readonly:false},
        {name:'action',text:'表单提交API',readonly:false},
        {name:'method',text:'表单提交方法',readonly:false},
        {name:'src',text:'图片地址',readonly:false}
    ],
    //已加载的控件
    controls:{},
    /** 
     * */ 
    constructor: function Simulator(config) {
        config = config || {};
        this.apply(config);
    }, 
    /** 
     * */ 
    onAfterInit:function onAfterInit()
    {
        var me = this;
        this.callParent();

        this.body.element.style.bottom ='45px';
        var _footer = document.createElement('div');
        _footer.classList.add('x-phone-footer');
        this.dom.appendChild(_footer);

        this.items[0].body.src = 'javascript:void(0)';//未设置body地址，好像有问题，获取不到_doc
        this.items[0].body.onload = function () {

            var _doc = me.getDocument();
            
            Rsd.onDragOver (_doc,me.id,function (event) {
                //console.log('doc DragOver')
            });

            Rsd.onDrop(_doc, me.id,function (event) {
                //console.log('doc drop');
                var _data = Rsd.toJson(event.dataTransfer.getData('Text'));
                if (_data&&_data.id) {

                    var _ctrl = me.getControl(_data.id);
                    _ctrl.parent = null;
                    _doc.body.appendChild(_ctrl.dom);

                    if(me.onChanged)
                    {
                        me.funApplyByIOC(me.onChanged,[_ctrl,event]);
                    }
                }
            });

           
        }
        this.simulator = this.items[0];
    },
    /**
     * @description 加载 page 数据
     * @param {*} data 
     */
    loadData:function loadData(data)
    {
        var _data = data||{};
        var items = _data.items||[];
        for(var i in items)
        {
            this.addControl(items[i]);
        }
    },
    /**
     * 
     *  */ 
    app_afterLayout:function app_afterLayout()
    {
        var _height =  parseInt(this.items[0].dom.clientHeight);
        this.items[0].body.element.style.height = (_height - 46) + 'px';
    },
     /**
      * @description 添加控件
      */ 
   addControl:function addControl(config) 
   {
        var me = this;
        var _doc = this.getDocument();
        if(!_doc)
        {
            return;
        }
        var _config = Rsd.apply({},config || {});

        _config.parent= _doc;
        _config.domFlag='simulator';
        _config.domFlagValue='redmicro';
        _config.listeners= {
                'click': {
                    element: 'dom',
                    fn: function (sender, event) {
                        me.funApplyByIOC(me.onSelectChanged, [sender, event])
                    }
                },
                'focus': {
                    element: 'dom',
                    fn: function (sender, event) {
                        me.funApplyByIOC(me.onSelectChanged, [sender, event])
                    }
                },
                'blur': {
                    element: 'dom',
                    fn: function (sender, event) {
                        Rsd.showPopup('blur');
                    }
                },
                'mouseover': {
                    element: 'dom',
                    fn: function (sender, event) {
                        sender.addCls('container', 'x-component-edit-box');

                    }
                },
                'mouseout': {
                    element: 'dom',
                    fn: function (sender, event) {

                        sender.removeCls('container', 'x-component-edit-box');
                    }
                },
                'dragstart':{
                    element:'dom',
                    fn:function (sender,event) {
                        sender.addCls('container', 'x-component-edit-box');

                        event.dataTransfer.setData('Text',Rsd.toString({cmd:'move',id:sender.id,pageX:event.pageX||event.clientX,pageY:event.pageY||event.clientY}));
                    }
                },
                'dragover':{
                    element:'body',
                    fn:function (sender,event) {
                        event.preventDefault();

                        var _data = Rsd.toJson(event.dataTransfer.getData('Text'));
                        if(_data == null || _data.id == this.id)return;
                        //console.log(this.id + 'over');
                    }
                },
                'dragend':{
                    element:'dom',
                    fn:function (sender,event) {

                        sender.removeCls('container', 'x-component-edit-box');
                        event.dataTransfer.clearData();

                        //console.log(this.id + 'end');
                        //event.dataTransfer.setData('Text',Rsd.toString({cmd:'move',pageX:event.pageX||event.clientX,pageY:event.pageY||event.clientY}));
                    }
                },
                'dragenter':{
                    element:'body',
                    fn:function (sender,event) {
                        //console.log(this.id + 'enter');
                        event.preventDefault();

                        var _data = Rsd.toJson(event.dataTransfer.getData('Text'));
                        if(_data == null || _data.id == this.id)return; 

                    }
                },
                'dragleave':{
                    element:'dom',
                    fn:function (sender,event) {
                        sender.removeCls('container', 'x-component-edit-box');
                        //console.log(this.id + 'leave');
                        event.preventDefault();

                        var _data = Rsd.toJson(event.dataTransfer.getData('Text'));
                        if(_data == null || _data.id == this.id)return;

                        //event.dataTransfer.setData('Text',Rsd.toString({cmd:'move',pageX:event.pageX||event.clientX,pageY:event.pageY||event.clientY}));
                    }
                }, 
                'drop':{
                    element:'dom',
                    fn:function (sender,event) {
                        //console.log(this.id + 'drop');
                        event.preventDefault();
                        event.cancelBubble = true;
                        event.stopPropagation();

                        var _data = Rsd.toJson(event.dataTransfer.getData('Text'));
                        if(_data== null)
                        {
                            return;
                        }
                    
                        var _obj = me.getControl(_data.id);
                        if(_obj == null)
                        {
                            console.error('未找到对象'+_data.id);
                        }
                        if(sender instanceof  Rsd.container.Component)
                        {
                            sender.add(_obj);
                        }
                        else
                        { 
                            sender.dom.parentNode.insertBefore(_obj.dom,sender.dom);
                        }
                        if(me.onChanged)
                        {
                            me.funApplyByIOC(me.onChanged,[_obj,event]);
                        }
                    }
                }
            };

        if(Rsd.xtypes.hasOwnProperty(_config.xtype)==false)
        {
            Rsd.showMessage('未找到xtype为:['+_config.xtype + ']的类。');
            return null;

        }
        //debugger;
        var _ctrl = Rsd.widget(_config);
        this.controls[_ctrl.id]= _ctrl;
        _ctrl.renderTo(_doc.body);
        _ctrl.doLayout();
        _ctrl.animate(300);
        return _ctrl;
    
    },

    /**
     * @description 获取控件
     * @param {*} id 
     */
    getControl:function getControl(id)
    { 
        return this.controls[id];
    },
    /**
     * @description 清除所有选择
     */
    clearSelected:function selectControl()
    { 
        for(var i in this.controls)
        {
            var ctrl = this.controls[i];
            ctrl.removeCls('container', 'x-component-select-box');
        }
    },
    /**
     * 选择控件
     * @param {*} id 
     */
    selectControl:function selectControl(id)
    {
        var doc = this.getDocument();
        if(!doc)
        {
            return;
        }
        var ctrl = this.controls[id];
        if(ctrl)
        {
            ctrl.addCls('container', 'x-component-select-box');
            doc.body.classList.remove( 'x-component-select-box');
        }
        else
        {
           
            if(id == doc.id)
            {
                doc.body.classList.add( 'x-component-select-box');
            }
        }
    },
    /** 
     * @@description 获取文档dom
     * */ 
    getDocument:function getDocument() {
       //debugger;
        if(this.items[0].body.element.contentWindow)
        {
            var _doc = this.items[0].body.element.contentWindow.document;
            _doc.id = 'doc_' + this.id;
            return _doc;
        }

        return null;
    },
    
    /**
     * @description 设置doc标题
     */ 
    setDocumentTitle:function setDocumentTitle(title) {
        var me = this;
        var _doc = this.getDocument();
        if(_doc)
        {
            _doc.title = title;
        }
        
        this.items[0].title = title ;

    },
    /**
     * 
     * @param {*} indexHtml 
     */
    setDocumentIndex:function setDocumentIndex(indexHtml)
    {
        Rsd.showPopup('设置 index html 未实现');
    },
     
    /** 
     * @description 设置控件属性值
     * */ 
    setControlProperty:function(id,name,value)
    {
        var ctrl = this.getControl(id);
        if(ctrl)
        {
            ctrl[name] = value;
        }
    },
   
    /**
     * 获取整个文档配置
     * @param {*} forSave 
     */
    getDocConfig:function getDocConfig(forSave) {

        var _doc = this.getDocument();
        if(!_doc)
        {
            return null;
        }
        var _config = {title: _doc.title,id:_doc.id,element:_doc, dataSource: '', indexFile: '', items: []};

        var _list = _doc.querySelectorAll('[simulator=redmicro]');
            for (var i = 0; i < _list.length; i++) {
                var _id = _list[i].getAttribute('id');
                var _obj =  this.getControl(_id);
                if(_obj == null)
                {
                    Rsd.showMessage('未找到对象,id['+_id + ']。');
                }
                _config.items.push(this.getControlConfig(_obj,forSave));
            }

      
        if(forSave)
        {
           delete _config['element'];
           delete _config['id'];
        }
        
        return _config;

    },
    /**
    * @description 获取文档设计组件配置项
     * */
    getControlConfig:function getControlConfig(ctrl,forSave) {

        
        var _config = {element:ctrl};
         //set parent id
         if(ctrl.parent instanceof Rsd.common.ComponentX)
         {
             _config['parent'] = ctrl.parent.id;
         }
         if(Rsd.isType(ctrl.parent , HTMLDocument))
         {
             _config['parent'] = 'doc_'+this.id;
         }

        if(Rsd.isType(ctrl,HTMLDocument)) {

            _config['xtype'] = 'document';
            _config['indexFile'] = this.items[0].body.src;
            _config['title'] = ctrl.title;
            _config['dataSource'] = ''; 

        }else
        {
            for(var i in this.ctrlSchemaList)
            {
                var _name = this.ctrlSchemaList[i].name;
                var _readonly = this.ctrlSchemaList[i].readonly;
                if(ctrl.hasProperty(_name))
                {
                    if(Rsd.isObject(ctrl[_name]))
                    {
                        _config[_name] = Rsd.clone(ctrl[_name]);
                        continue;
                    }
                     
                    _config[_name] = Rsd.clone(ctrl[_name])||null;
                }

            }
        }


       
        if(forSave)
        {
           delete _config['element'];
           delete _config['id'];
           delete _config['$className'];
           if(_config.label)
           {
              delete _config.label['element'];
           }
           if(_config.header)
           {
              delete _config.header['element'];
           }
           
        }
        return _config;
    }

});